<template>
  <el-drawer :title="title" :visible.sync="open" size="1200px">
    <div class="print-border">
      <statement-preview :data-list="dataList" ref="statementPreview" @loadingChange="loadingChange" />
      <div class="print">
        <div>
          <el-progress v-show="printLoading" :percentage="exportPercentage"></el-progress>
        </div>
        <div>
          <el-button type="primary" :loading="printLoading" :disabled="printLoading" @click="onPrinter">打印</el-button>
          <el-button type="primary" :loading="printLoading" :disabled="printLoading" @click="onExportPDF">导出</el-button>
          <el-button @click="cancel">关 闭</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import StatementPreview from "./StatementPreview.vue";
import { sortData } from "../utils";
import store from "@/store";
export default {
  name: "StatementSelectView",
  components: { StatementPreview },
  data () {
    return {
      title: "导出/打印 预览效果",
      open: false,
      dataList: [],
      printLoading: false,
      exportPercentage: 0, // 初始进度值
      status: "active" // 进度条状态
    };
  },
  created () { },
  mounted () { },
  methods: {
    init (dataList) {
      store.dispatch("reportForms/printEmptyChange", true);
      this.dataList = sortData(dataList);
      this.open = true;
    },
    // 打印
    onPrinter () {
      this.$refs.statementPreview.printer();
    },
    // 导出
    onExportPDF () {
      this.$refs.statementPreview.exportPDF();
    },
    loadingChange (value) {
      const { exportPercentage, printLoading } = value;
      this.printLoading = printLoading;
      this.exportPercentage = Number(exportPercentage) > 100 ? 100 : Number(exportPercentage);
    },
    // 取消按钮
    cancel () {
      this.open = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.print-border {
  padding: 0 10px 60px 10px;
}

.print {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  z-index: 999;
  background-color: #fff;
  width: 100%;
  padding: 10px 20px;

  ::v-deep {
    .el-progress-bar {
      width: 300px !important;
    }

    .el-progress-bar__outer {
      height: 15px !important;
    }

    .el-progress-bar__inner {
      background-color: #409eff;
      background-image: -webkit-linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      background-image: -o-linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      background-image: linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      -webkit-background-size: 1rem 1rem;
      background-size: 1rem 1rem;
      animation: 2s linear infinite pbs;
      animation-iteration-count: 10;
    }

    @keyframes pbs {
      0% {
        background-position-x: 1rem;
      }
    }
  }
}
</style>
